<template>
	<!-- 20221118 -->
	<view class="layer-search-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 浮层内容 -->
			<view class="layer-content bg-ff">
				<!-- 插槽 -->
				<slot></slot>
				
				<!-- 上方搜索框 -->
				<view class="width-100p padding-lr-30">
					<ty-bar-search :value.sync="keyword" @search="search" @cancel="cancel" :autofocus="true"
						:clearable="true" :show-cancel="true">
					</ty-bar-search>
				</view>

				<!-- 历史搜索 -->
				<view class="margin-lr-30 border-bottom-ed">
					<!-- 标题 -->
					<view class="padding-top-20 flex align-center justify-between">
						<text class="text-28 text-bold">历史搜索</text>
						<text class="tyIcon-delete text-30 text-aa" @click="remove" ></text>
					</view>

					<!-- 内容 -->
					<view class="margin-top-30 padding-bottom-10">
						<view class="flex flex-wrap" v-if="historyList.length">
							<view
								class="margin-right-20 margin-bottom-20 padding-lr-25 line-height-60 radius-30 bg-f5 text-24 text-4d text-cut-one"
								@click='searchQuick(item.content)' v-for="(item,index) in historyList" :key="index">
								{{item.content}}
							</view>
						</view>
						<view class="line-height-80 text-center text-28 text-4d" v-else>
							暂无历史搜索记录
						</view>
					</view>
				</view>

				<!-- 热门搜索 -->
				<view class="margin-lr-30">
					<!-- 标题 -->
					<view class="padding-top-30">
						<text class="text-28 text-bold">热门搜索</text>
					</view>
					
					<!-- 内容 -->
					<view class="margin-top-15">
						<view class="flex flex-wrap" v-if="hotList.length">
							<view class="padding-right-30 width-50p line-height-70 text-26 text-4d text-cut-one"
								@click='searchQuick(item.content)' v-for="(item,index) in hotList" :key="index">
								{{item.content}}
							</view>
						</view>
						<view class="line-height-80 text-center text-28 text-4d" v-else>
							暂无热门搜索记录
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 组件浮层 -->
		<view class="cn-layer">
			
		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		data() {
			return {
				// 关键字
				keyword: ''
			}
		},
		props: {
			// 历史搜素列表
			historyList: {
				type: Array,
				default: []
			},
			// 热门搜索列表
			hotList: {
				type: Array,
				default: []
			}
		},

		methods: {
			/**
			 * 搜索事件
			 * @param {Object} e
			 * @date 2022-11-18
			 */
			search(e) {
				if (!e.keyword) {
					if (this.historyList.length) {
						this.keyword = this.historyList[0].content
						e.keyword = this.historyList[0].content
					} else if (this.hotList.length) {
						this.keyword = this.hotList[0].content
						e.keyword = this.hotList[0].content
					} else {
						common.toast('搜索内容不能为空')
						return false
					}
				}


				// 清空输入框
				this.keyword = ''

				// 触发事件
				this.$emit("search", {
					keyword: e.keyword
				})
			},

			/**
			 * 快速点击搜索事件
			 * @param {string} keyword 关键字
			 * @date 2022-11-18
			 */
			searchQuick(keyword) {
				this.$emit("search", {
					keyword: keyword
				})
			},

			/**
			 * 清空历史搜索事件
			 * @date 2022-11-18
			 */
			remove() {
				this.$emit("remove")
			},

			/**
			 * 取消事件
			 * @date 2022-11-18
			 */
			cancel() {
				uni.navigateBack({
					delta: 1
				})
				this.$emit("cancel")
			}
		}
	}
</script>

<style scoped>
	.layer-content {
		width: 100vw;
		height: 100vh;
	}
</style>
